import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

import {
  HeaderContainer
} from './style'

@withRouter
class Header extends Component {

  state = {
    cateStyle: 'active',
    cookbook: '',
    slider: 'slider',
    classList: ['active', '']
  }

  sliderFn = val => {
    let classList = this.state.classList.map(item => '')
    classList[val] = 'active'
    let slider = val === 0 ? 'slider' : 'slider right'
    this.setState({ classList, slider })

    if (val === 0) {
      this.props.history.push('/cate')
    } else {
      this.props.history.push('/cookbook')
    }

    /* if (val === 'left') {
      this.setState({
        cateStyle: 'active',
        cookbook: '',
        slider: 'slider'
      })
    } else {
      this.setState({
        cateStyle: '',
        cookbook: 'active',
        slider: 'slider right'
      })
    } */
  }

  render() {
    return (
      <HeaderContainer>
        <ul>
          {/* <li className={this.state.cateStyle} onClick={this.sliderFn.bind(this, 'left')}>分类</li>
          <li className={this.state.cookbook} onClick={this.sliderFn.bind(this, 'right')}>食材</li> */}
          <li className={this.state.classList[0]} onClick={this.sliderFn.bind(this, 0)}>分类</li>
          <li className={this.state.classList[1]} onClick={this.sliderFn.bind(this, 1)}>食材</li>
          {/* 定位了 绝对定位 */}
          <li className={this.state.slider}></li>
        </ul>
      </HeaderContainer>
    );
  }
}

export default Header;
